<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 750px;
            margin: 0 auto;
        }
        ul{
            display: flex;
        }
        ul > li{
            width: 70px;
            height: 250px;
            overflow: hidden;
            transition: width .2s linear;
        }
        img{
            display: block;
            width: 400px;
            height: 250px;
        }
        ol{
            display: flex;
        }
        ol > li{
            width: 10px;
            height: 10px;
            margin: 10px;
            background-color: aquamarine;
        }
        ol > li:first-child{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        // 6.1
       var ul = document.querySelector("ul");
        // 1.图片路径的前缀
        var str = "https://www.jq22.com/demo/jquerylbqh201910210040/images/0";

        // 4.声明一个空字符串用来叠加 多个li标签
        var str1 = "";
        // 2.循环创建多个li标签 带图的那个
        for(var i = 1;i <= 6;i++){
            // 3.拼接路径
            var url = str + i + ".png"
            // 5.叠加li
            str1 += `<li>
                    <img src="${url}" alt="tu">
                </li>`
        }
        // 6.将创建的li添加给ul
        console.log(str1);
        ul.innerHTML = str1;

        // 1.获取需要点击的li标签
        var lis = document.querySelectorAll("ul > li");
        // 7.获取下边所有的小方块
        var ollis = document.querySelectorAll("ol > li");
        // 2.给第一个li设置初始样式
        lis[0].style.width = "400px";

        // 3.循环得到每个li标签
        for(var i = 0;i < lis.length;i++){
            // console.log(i); //0-5
            // 10.给每个li添加一个自定义属性 属性的值是当前标签的索引值
            // 这样只要可以获取一个标签 就可以获取这个标签的索引值
            lis[i].aaa = i; //lis[0].aaa = 0; lis[1].aaa = 1; lis[2].aaa = 2;...
            // 4.给每个li添加点击事件
            lis[i].onclick = function(){
                // console.log(i); //6

                // 5.使用排他思想; 先给所以的标签都设置取消特殊样式
                for(var k = 0;k < lis.length;k++){
                    // 5.1设置取消样式
                    lis[k].style.width = "70px";
                    // 8.先取消所有小方块的特殊样式(小方块的数量索引值与li带图的是一样的,所以可以使用同一个循环)
                    // 9? 如何获取当前点击的li(带图的) 的索引值
                    ollis[k].style.backgroundColor = "aquamarine";
                }
                // 11.通过当前标签this 获取自定义属性aaa的值 也就是记录的当前标签的索引值
                // console.log(this.aaa); 

                // 12.根据获取的索引值找到相对应位置的小方块的li设置特殊样式
                ollis[this.aaa].style.backgroundColor = "red";
                // 6.给当前标签添加特殊样式
                this.style.width = "400px";
                
            }
        }
        

    </script>
</body>
</html>